<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>管理店铺</title>
    <link rel="shortcut icon" type="image/x-icon" th:href="@{../../static/img/index/bitbug_favicon.ico}"/>
    <link rel="stylesheet" th:href="@{../../static/css/bootstrap.css}"/>
    <link rel="stylesheet" th:href="@{../../static/css/index/serch.css}"/>
    <link rel="stylesheet" th:href="@{../../static/css/store/manage.css}"/>
    <link rel="stylesheet" th:href="@{../../static/css/store/build.css}"/>
    <script th:src="@{../../static/js/jquery-2.1.0.js}" type="text/javascript" charset="utf-8"></script>
    <script th:src="@{../../static/js/bootstrap.js}" type="text/javascript" charset="utf-8"></script>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.common.dev.js"></script>
</head>
<script>
    $(function () {
        //图片上传
        $('#imgfile').change(function () {
            var senddata = new FormData();
            var img_file = document.getElementById("imgfile");
            var fileObj = img_file.files[0];
            senddata.append("file", fileObj);
            console.log("图片上传");
            $.ajax({
                type: 'post',
                url: "/picture/upload",
                async: true,
                dataType: 'json',
                data: senddata,
                processData: false,
                contentType: false,
                success: function (res) {
                    if (res.status == 1) {
                        console.log(res.src);
                        $('#storeCover').attr('src', res.src);
                        $('#cover').val(res.src);
                    } else if (res.status == 2) {
                        alert('图片格式不正确');
                    } else if (res.status == 3) {
                        alert('图片过大');
                    }
                }
            });
        })
    })
</script>
<body>
<!--首页头部-->
<nav class="navbar navbar-default navbar-inverse navbar-fixed-top">
    <div class="container">
        <ul class="nav navbar-nav">
            <li>
                <a href="#" style="font-size: 30px; font-family:'楷体';">L商城</a>
            </li>
            <li th:if="${session.login_user!=null}">
                <a href="#" th:text="'欢迎您 :'+${session.login_user.getUsername()}"></a>
            </li>
            <li th:if="${session.login_user!=null}">
                <a th:href="@{'/user/set/'+${session.login_user.getId()}}">个人中心</a>
            </li>
        </ul>
    </div>
</nav>
<!--店铺封面及描述-->
<div class="container dpxx">
    <div class="thumbnail col-lg-6">
        <img id="storeCover" th:src="${store.storeCover}" alt=""/>
        <div class="caption">
            <h3>{{store_name}}</h3>
            <p>{{store_description}}</p>
        </div>
    </div>
    <div class="col-lg-6">
        <!--修改店铺信息-->
        <form th:action="@{/store/update}" method="post">
            <p class="text-primary">店铺名称</p>
            <input type="text" name="storeName" class="form-control" v-model="store_name"/>
            <input type="hidden" id="ref1" th:value="${store.storeName}">
            <input type="hidden" id="ref2" th:value="${store.info}">
            <input type="hidden" name="id" th:value="${store.id}">
            <input type="hidden" name="storeCover" id="cover" th:value="${store.storeCover}">
            <hr/>
            <p class="text-primary">店铺简介</p>
            <textarea name="info" class="form-control" v-model="store_description"></textarea>
            <hr/>
            <p class="text-primary">店铺封面</p>
            <input type="file" id="imgfile"/>
            <br/>
            <input type="submit" class="btn btn-success" value="确认修改"/>
        </form>
    </div>
</div>
<hr/>
<!--商品列表信息-->
<div class="container">
    <h3 class="text-info">商品列表</h3>
    <hr/>
    <a th:href="@{'/product/reg/'+${store.id}}" class="btn btn-block btn-warning">新增商品</a>
    <br/>
    <div class="thumbnail col-lg-3" th:each="pro:${productsList}">
        <a href="#"><img th:src="${pro.cover}" alt="..."></a>
        <!--商品-->
        <div class="caption">
            <a href="#">
                <h3 th:text="${pro.proname}">骆驼牌羊奶</h3>
                <p th:text="${pro.getInfo()}"></p>
            </a>
            <p class="product_op">
                <a th:href="@{'/product/delete/'+${pro['id']}+'/'+${store.id}}">删除</a>
                <a th:href="@{'/product/nostatus/'+${pro['id']}+'/'+${store.id}}" th:if="${pro['status']==1}">下架</a>
                <a th:href="@{'/product/status/'+${pro['id']}+'/'+${store.id}}" th:if="${pro['status']==0}">上架</a>
            </p>
        </div>
    </div>
</div>
</body>
<script>
    new Vue({
        el: '.dpxx',
        data: {
            store_name: $('#ref1').val(),
            store_description: $('#ref2').val()
        }
    })
</script>
</html>
